/* ==========================================================================
   CSS GRIDS

    The CSS Grids provides a simple system for laying out content. The basic components are "grids" and "units". 
    A "grid" (cgrid) contains one or more "units" (cgrid-unit). 
    The type of "unit" chosen describes how it should be sized (e.g. "cgrid-unit-1-2" takes up half the grid, "cgrid-unit-1-3" takes up one-third, et cetera). 
    The only constraints for cgrid Grids are that all "units" are children of a "grid". 
    All you need to do is define a grid, one or more units inside it, and specify widths for them. 
    Then stack and nest as required.
   ========================================================================== */

.cgrid:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.cgrid-unit-1, .cgrid-unit-1-2, .cgrid-unit-1-3, .cgrid-unit-2-3, .cgrid-unit-1-4, 
.cgrid-unit-3-4, .cgrid-unit-1-5, .cgrid-unit-1-7, .cgrid-unit-2-5, .cgrid-unit-3-5, .cgrid-unit-4-5, 
.cgrid-unit-1-6, .cgrid-unit-5-6, .cgrid-unit-5-7, .cgrid-unit-5-9, .cgrid-unit-1-8, .cgrid-unit-3-8, .cgrid-unit-5-8, 
.cgrid-unit-7-8, .cgrid-unit-1-10, .cgrid-unit-3-10, .cgrid-unit-7-10, .cgrid-unit-9-10, .cgrid-unit-1-12, .cgrid-unit-5-12, .cgrid-unit-7-12, .cgrid-unit-11-12, 
.cgrid-unit-5-16, .cgrid-unit-11-16,
.cgrid-unit-1-24, .cgrid-unit-5-24, .cgrid-unit-7-24, .cgrid-unit-11-24, .cgrid-unit-13-24, 
.cgrid-unit-17-24, .cgrid-unit-19-24, .cgrid-unit-23-24, .cgrid-unit-1-9, .cgrid-unit-2-9 , .cgrid-unit-4-9, .cgrid-unit-5-9, .cgrid-unit-7-9, .cgrid-unit-8-9 , .cgrid-unit-1-15 , .cgrid-unit-1-30 ,
.cgrid-unit-2-7, .cgrid-unit-3-7, .cgrid-unit-4-7, .cgrid-unit-6-7, cgrid-unit-1-19, cgrid-unit-18-19  {
    float:left;
    margin: 0;
    padding: 0;
}

.cgrid-fluid-unit-1, .cgrid-fluid-unit-1-2, .cgrid-fluid-unit-1-3, .cgrid-fluid-unit-2-3, .cgrid-fluid-unit-1-4, 
.cgrid-fluid-unit-3-4, .cgrid-fluid-unit-1-5, .cgrid-fluid-unit-2-5, .cgrid-fluid-unit-3-5, .cgrid-fluid-unit-4-5, 
.cgrid-fluid-unit-1-6, .cgrid-fluid-unit-5-6, .cgrid-fluid-unit-1-8, .cgrid-fluid-unit-3-8, .cgrid-fluid-unit-5-8, 
.cgrid-fluid-unit-7-8, .cgrid-fluid-unit-1-10, .cgrid-fluid-unit-3-10, .cgrid-fluid-unit-7-10, .cgrid-fluid-unit-9-10, .cgrid-fluid-unit-1-12, .cgrid-fluid-unit-5-12, .cgrid-fluid-unit-7-12, .cgrid-fluid-unit-11-12, 
.cgrid-fluid-unit-5-16, .cgrid-fluid-unit-11-16,
.cgrid-fluid-unit-1-24, .cgrid-fluid-unit-5-24, .cgrid-fluid-unit-7-24, .cgrid-fluid-unit-11-24, .cgrid-fluid-unit-13-24, 
.cgrid-fluid-unit-17-24, .cgrid-fluid-unit-19-24, .cgrid-fluid-unit-23-24,.cgrid-fluid-unit-1-9, .cgrid-fluid-unit-2-9, .cgrid-fluid-unit-4-9, .cgrid-fluid-unit-5-9, .cgrid-fluid-unit-7-9, .cgrid-fluid-unit-8-9, .cgrid-fluid-unit-1-15, .cgrid-fluid-unit-1-30,
.cgrid-fluid-unit-1-7, .cgrid-fluid-unit-2-7, .cgrid-fluid-unit-3-7, .cgrid-fluid-unit-4-7, .cgrid-fluid-unit-5-7, .cgrid-fluid-unit-6-7, cgrid-fluid-unit-1-19, cgrid-fluid-unit-18-19 {
    float:left;
    margin: 0;
    padding: 0;
}



.cgrid-unit-1 {
   float:none;
}

.cgrid-fluid-unit-1 {
   float:left;
   max-width: 100%;
}

.cgrid-unit-1-9 {
   width: 11.11%;
}

.cgrid-unit-2-9 {
   width: 22.22%;
}

.cgrid-unit-4-9 {
   width: 44.44%
}

.cgrid-unit-5-9 {
   width: 55.55%;
}

.cgrid-unit-7-9 {
   width: 77.77%;
}

.cgrid-unit-8-9 {
   width: 88.88%;
}

.cgrid-unit-1-19 {
    width:5.26%;
}

.cgrid-unit-18-19{
    width: 94.74%;
}

.cgrid-fluid-unit-1-19 {
    width: 5.06%;
}

.cgrid-fluid-unit-18-19 {
    width: 94.94%;
}

.cgrid-fluid-unit-1-9 {
   max-width: 11.11%;
}

.cgrid-fluid-unit-2-9 {
   max-width: 22.22%;
}
.cgrid-fluid-unit-4-9 {
   max-width: 44.44%;
}

.cgrid-fluid-unit-5-9 {
   max-width: 55.55%;
}

.cgrid-fluid-unit-7-9 {
   max-width: 77.77%;
}

.cgrid-fluid-unit-8-9 {
    max-width: 88.88%;
}

.cgrid-unit-2-7 {
    width: 28.57%;
}

.cgrid-fluid-unit-2-7 {
    max-width: 28.57%;
}

.cgrid-unit-3-7 {
    width: 42.87%;
}

.cgrid-fluid-unit-3-7 {
    max-width: 42.87%;
}

.cgrid-unit-4-7 {
    width: 57.14%;
}

.cgrid-fluid-unit-4-7 {
    max-width: 57.14%;
}

.cgrid-unit-6-7 {
    width: 85.71%;
}

.cgrid-fluid-unit-6-7 {
    max-width: 85.71%;
}

.cgrid-unit-1-2 {
    width: 50%;
}

.cgrid-fluid-unit-1-2 {
    max-width: 50%;
}

.cgrid-unit-1-3 {
    width: 33.33333%;
}

.cgrid-fluid-unit-1-3 {
    max-width: 33.33333%;
}

.cgrid-unit-2-3 {
    width: 66.66666%;
}

.cgrid-fluid-unit-2-3 {
    max-width: 66.66666%;
}

.cgrid-unit-1-4 {
    width: 25%;
}

.cgrid-fluid-unit-1-4 {
    max-width: 25%;
}

.cgrid-unit-3-4 {
    width: 75%;
}

.cgrid-fluid-unit-3-4 {
    max-width: 75%;
}

.cgrid-unit-1-5 {
    width: 20%;
}

.cgrid-fluid-unit-1-5 {
    max-width: 20%;
}

.cgrid-unit-2-5 {
    width: 40%;
}

.cgrid-fluid-unit-2-5 {
    max-width: 40%;
}

.cgrid-unit-3-5 {
    width: 60%;
}

.cgrid-fluid-unit-3-5 {
    max-width: 60%;
}

.cgrid-unit-4-5 {
    width: 80%;
}

.cgrid-unit-5-9 {
    width: 55%;
}

.cgrid-fluid-unit-4-5 {
    max-width: 80%;
}

.cgrid-unit-1-6 {
    width: 16.656%;
}

.cgrid-unit-1-7 {
    width: 14.287%;
}

.cgrid-fluid-unit-1-7 {
    max-width: 14.287%;
}

.cgrid-unit-5-7 {
    width: 71.428%;
}

.cgrid-fluid-unit-5-7 {
    max-width: 71.428%;
}

.cgrid-fluid-unit-1-6 {
    max-width: 16.656%;
}

.cgrid-unit-5-6 {
    width: 83.33%;
}

.cgrid-fluid-unit-5-6 {
    max-width: 83.33%;
}

.cgrid-unit-1-8 {
    width: 12.5%;
}

.cgrid-fluid-unit-1-8 {
    max-width: 12.5%;
}

.cgrid-unit-3-8 {
    width: 37.5%;
}

.cgrid-fluid-unit-3-8 {
    max-width: 37.5%;
}

.cgrid-unit-5-8 {
    width: 62.5%;
}

.cgrid-fluid-unit-5-8 {
    max-width: 62.5%;
}

.cgrid-unit-7-8 {
    width: 87.5%;
}

.cgrid-fluid-unit-7-8 {
    max-width: 87.5%;
}

.cgrid-unit-1-10 {
    width: 10%;
}

.cgrid-unit-1-15 {
    width: 6.66666%;
}

.cgrid-fluid-unit-1-15 {
    max-width: 6.66666%;
}

.cgrid-unit-1-30 {
    width:3.33333%;
}

.cgrid-fluid-unit-1-30 {
    max-width:3.33333%;
}

.cgrid-fluid-unit-1-10 {
    max-width: 10%;
}

.cgrid-unit-3-10{
    width: 30%;
}

.cgrid-fluid-unit-3-10 {
    max-width: 30%;
}

.cgrid-unit-7-10 {
    width: 70%;
}

.cgrid-fluid-unit-7-10 {
    max-width: 70%;
}

.cgrid-unit-9-10{
    width: 90%;
}

.cgrid-fluid-unit-9-10{
    max-width: 90%;
}

.cgrid-unit-1-12 {
    width: 8.3333%;
}

.cgrid-fluid-unit-1-12 {
    max-width: 8.3333%;
}

.cgrid-unit-5-12 {
    width: 41.6666%;
}

.cgrid-fluid-unit-5-12 {
    max-width: 41.6666%;
}

.cgrid-unit-7-12 {
    width: 58.3333%;
}

.cgrid-fluid-unit-7-12 {
    max-width: 58.3333%;
}

.cgrid-unit-11-12 {
    width: 91.6666%;
}

.cgrid-fluid-unit-11-12 {
    max-width: 91.6666%;
}

.cgrid-unit-5-16 {
    width: 31.25%;
}

.cgrid-fluid-unit-5-16 {
    max-width: 31.25%;
}

.cgrid-unit-11-16 {
    width: 68.75%;
}

.cgrid-fluid-unit-11-16 {
    max-width: 68.75%;
}

.cgrid-unit-1-24 {
    width: 4.1666%;
}

.cgrid-fluid-unit-1-24 {
    max-width: 4.1666%;
}

.cgrid-unit-5-24 {
    width: 20.8333%;
}

.cgrid-fluid-unit-5-24 {
    max-width: 20.8333%;
}

.cgrid-unit-7-24 {
    width: 29.1666%;
}

.cgrid-fluid-unit-7-24 {
    max-width: 29.1666%;
}

.cgrid-unit-11-24 {
    width: 45.8333%;
}

.cgrid-fluid-unit-11-24 {
    max-width: 45.8333%;
}

.cgrid-unit-13-24 {
    width: 54.1666%;
}

.cgrid-fluid-unit-13-24 {
    max-width: 54.1666%;
}

.cgrid-unit-17-24 {
    width: 70.8333%;
}

.cgrid-fluid-unit-17-24 {
    max-width: 70.8333%;
}

.cgrid-unit-19-24 {
    width: 79.1666%;
}

.cgrid-fluid-unit-19-24 {
    max-width: 79.1666%;
}

.cgrid-unit-23-24 {
    width: 95.8333%;
}

.cgrid-fluid-unit-23-24 {
    max-width: 95.8333%;
}

/* ----------- Most phones ----------- */

/* Portrait and Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {

.cgrid-unit-1, .cgrid-unit-1-2, .cgrid-unit-1-3, .cgrid-unit-2-3, .cgrid-unit-1-4, 
.cgrid-unit-3-4, .cgrid-unit-1-5, .cgrid-unit-2-5, .cgrid-unit-3-5, .cgrid-unit-4-5, 
.cgrid-unit-1-6, .cgrid-unit-5-6, .cgrid-unit-1-8, .cgrid-unit-3-8, .cgrid-unit-5-8, 
.cgrid-unit-7-8, .cgrid-unit-1-12, .cgrid-unit-5-12, .cgrid-unit-7-12, .cgrid-unit-11-12, 
.cgrid-unit-5-16, .cgrid-unit-11-16,
.cgrid-unit-1-24, .cgrid-unit-5-24, .cgrid-unit-7-24, .cgrid-unit-11-24, .cgrid-unit-13-24, 
.cgrid-unit-17-24, .cgrid-unit-19-24, .cgrid-unit-23-24 {
    float: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

}


/* ----------- Most tablets ----------- */

@media only screen and (min-device-width: 737px) and (max-device-width: 1024px) {

}